<template>
  <div class="transactions-card">
    <div class="card-header">
      <h2>{{ $t('交易记录') }}</h2>
      <div class="filters">
        <el-select v-model="type" :placeholder="$t('全部交易类型')" class="amazon-select" @change="handleTypeChange">
          <!--          <el-option label="全部" value="" />-->
          <el-option :label="$t('充值订单')" value="rechargeorde" />
          <el-option :label="$t('提款订单')" value="withdraworde" />
          <el-option :label="$t('充值记录')" value="recharge" />
          <el-option :label="$t('提款记录')" value="withdraw" />
          <el-option :label="$t('消费')" value="consume" />
          <el-option :label="$t('退款')" value="refund" />
          <el-option :label="$t('返佣')" value="commission" />
        </el-select>
        <!--        <el-date-picker-->
        <!--          v-model="date"-->
        <!--          type="daterange"-->
        <!--          range-separator="至"-->
        <!--          start-placeholder="开始日期"-->
        <!--          end-placeholder="结束日期"-->
        <!--          class="amazon-date-picker"-->
        <!--        />-->
      </div>
    </div>

    <!-- 修改空状态显示 -->
    <el-empty v-if="!dataList.length" :image-size="120">
      <template #image>
        <i class="fas fa-file-invoice-dollar empty-icon"></i>
      </template>
      <template #description>
        <p class="empty-text">{{ $t('暂无交易记录') }}</p>
      </template>
    </el-empty>

    <!-- 表格仅在有数据时显示 -->
    <template v-else>
      <!-- 桌面端表格 -->
      <el-table v-if="!isMobile" :data="dataList" class="amazon-table" :header-cell-style="{
        background: '#f8f8f8',
        color: '#333',
        fontWeight: '500'
      }">
        <el-table-column prop="createTime" :label="$t('交易时间')" width="180">
          <template #default="{ row }">
            {{ formatDate(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="type" :label="$t('交易类型')" width="180">
          <template #default="{ row }">
            <span v-if="type == 'rechargeorde'">{{ $t('充值订单') }}</span>
            <span v-if="type == 'withdraworde'">{{ $t('提款订单') }}</span>
            <span v-if="row.type == 1">{{ $t('充值') }}</span>
            <span v-if="row.type == 2">{{ $t('提现') }}</span>
            <span v-if="row.type == 4">{{ $t('订单收入') }}</span>
            <span v-if="row.type == 5">{{ $t('购买商品') }}</span>
            <span v-if="row.type == 7">{{ $t('回收') }}</span>
            <span v-if="row.type == 8">{{ $t('退款') }}</span>
            <span v-if="row.type == 18">{{ $t('商品直接购买') }}</span>
            <span v-if="row.type == 19">{{ $t('商品订单支付') }}</span>
            <span v-if="row.type == 20">{{ $t('商品订单退款') }}</span>
            <span v-if="row.type == 21">{{ $t('商品回收') }}</span>
            <!-- <span :class="['type-tag', row.type]">{{ getTransactionTypeLabel(row.type) }}</span> -->
            <!-- <span :class="['type-tag', row.type]">{{ getTransactionTypeLabel(row.type) }}</span> -->
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="$t('金额')" width="180">
          <template #default="{ row }">
            <div v-if="type == 'withdraworde' || type == 'rechargeorde'">
              {{ useLangStore.languageSymbol }}{{ type == 'rechargeorde' ? row.rechargeMoney * langStore.languageRate :
                row.applyMoney * langStore.languageRate }}
            </div>
            <div v-else>
              {{ useLangStore.languageSymbol }}{{ row.amount }}
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="type != 'withdraworde' && type != 'rechargeorde'" prop="beforeAmount" label="操作前余额"
          width="180">
          <template #default="{ row }">
            <div>
              {{ useLangStore.languageSymbol }}{{ row.beforeAmount }}
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="type != 'withdraworde' && type != 'rechargeorde'" prop="afterAmount" label="操作后余额"
          width="180">
          <template #default="{ row }">
            <div>
              {{ useLangStore.languageSymbol }}{{ row.afterAmount }} 
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="type == 'withdraworde' || type == 'rechargeorde'" prop="createTime" :label="$t('到账金额')"
          width="180">
          <template #default="{ row }">
            {{ useLangStore.languageSymbol }}{{ type == 'rechargeorde' ? row.receiveAmount * langStore.languageRate :
              row.receiveAmount * langStore.languageRate }}
          </template>
        </el-table-column>
        <el-table-column v-if="type == 'withdraworde' || type == 'rechargeorde'" prop="createTime" :label="$t('手续费')"
          width="180">
          <template #default="{ row }">
            {{ useLangStore.languageSymbol }}{{ type == 'rechargeorde' ? row.fee * langStore.languageRate :
              row.fee * langStore.languageRate }}
          </template>
        </el-table-column>

        <el-table-column v-if="type != 'withdraworde' && type != 'rechargeorde'" prop="remark" label="备注" width="180">
          <template #default="{ row }">
            {{ row.remark }}
          </template>
        </el-table-column>


        <el-table-column prop="payStatus" :label="$t('状态')" width="180"
          v-if="type == 'withdraworde' || type == 'rechargeorde'">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.payStatus)">

              <span v-if="type == 'rechargeorde'">
                <span v-if="row.payStatus == 'WAIT'"> {{ $t('待审核') }}</span>
                <span v-if="row.payStatus == 'SUCCESS'">{{ $t('成功') }}</span>
                <span v-if="row.payStatus == 'FAIL'">{{ $t('失败') }}</span>
                <span v-if="row.payStatus == 'CANCEL'">{{ $t('已取消') }}</span>
              </span>

              <span v-else>
                <span v-if="row.applyStatus == 'WAIT'">{{ $t('待审核') }}</span>
                <span v-if="row.applyStatus == 'SUCCESS'">{{ $t('成功') }}</span>
                <span v-if="row.applyStatus == 'FAIL'">{{ $t('失败') }}</span>
                <span v-if="row.applyStatus == 'CANCEL'">{{ $t('已取消') }}</span>
              </span>
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 移动端列表 -->
      <div v-if="isMobile" class="mobile-list">
        <div v-for="record in dataList" :key="record.id" class="record-item">
          <div class="record-row">
            <span class="label">{{ $t('时间') }}</span>
            <span class="value">{{ formatDate(record.createTime) }}</span>
          </div>
          <div class="record-row">
            <span class="label">{{ $t('交易类型') }}</span>
            <span class="value">
              <span v-if="record.type == 1">{{ $t('充值') }}</span>
              <span v-if="record.type == 2">{{ $t('提现') }}</span>
              <span v-if="record.type == 4">{{ $t('订单收入') }}</span>
              <span v-if="record.type == 5">{{ $t('购买商品') }}</span>
              <span v-if="record.type == 7">{{ $t('回收') }}</span>
              <span v-if="record.type == 8">{{ $t('退款') }}</span>
              <span v-if="record.type == 18">{{ $t('商品直接购买') }}</span>
              <span v-if="record.type == 19">{{ $t('商品订单支付') }}</span>
              <span v-if="record.type == 20">{{ $t('商品订单退款') }}</span>
              <span v-if="record.type == 21">{{ $t('商品回收') }}</span>
              <!-- <span :class="['type-tag', record.type]">
                {{ getTransactionTypeLabel(record.type) }}
              </span> -->
            </span>
          </div>
          <div class="record-row" v-if="type == 'withdraworde' || type == 'rechargeorde'">
            <span class="label">{{ $t('金额') }}</span>
            <span class="value">
              <span>
                {{ useLangStore.languageSymbol }}{{ type == 'rechargeorde' ? record.rechargeMoney *
                langStore.languageRate :
                record.applyMoney * langStore.languageRate }}
              </span>
            </span>
          </div>
          <div class="record-row" v-else>
            <span class="label">{{ $t('金额') }}</span>
            <span class="value">
              <span>
                {{ useLangStore.languageSymbol }}{{ record.amount }}
              </span>
            </span>
          </div>
          <div class="record-row" v-if="type != 'withdraworde' && type != 'rechargeorde'">
            <span class="label">{{ $t('操作前余额') }}</span>
            <span class="value">
              <span>
                {{ useLangStore.languageSymbol }}{{ record.beforeAmount }}
              </span>
            </span>
          </div>
          <div class="record-row" v-if="type != 'withdraworde' && type != 'rechargeorde'">
            <span class="label">{{ $t('操作后余额') }}</span>
            <span class="value">
              <span>
                {{ useLangStore.languageSymbol }}{{ record.afterAmount }}
              </span>
            </span>
          </div>
          <div class="record-row" v-if="type != 'withdraworde' && type != 'rechargeorde'">
            <span class="label">{{ $t('备注') }}</span>
            <span class="value">
              <span>
                {{ useLangStore.remark }}
              </span>
            </span>
          </div>
          <div class="record-row" v-if="type == 'withdraworde' || type == 'rechargeorde'">
            <span class="label">{{ $t('到账金额') }}</span>
            <span class="value">
              <span>
                {{ useLangStore.languageSymbol }}{{ type == 'recharge' ? record.receiveAmount * langStore.languageRate :
                record.receiveAmount * langStore.languageRate }}
              </span>
            </span>
          </div>
          <div class="record-row" v-if="type == 'withdraworde' || type == 'rechargeorde'">
            <span class="label">{{ $t('手续费') }}</span>
            <span class="value">
              <span>
                {{ useLangStore.languageSymbol }}{{ type == 'rechargeorde' ? record.fee * langStore.languageRate :
                record.fee * langStore.languageRate }}
              </span>
            </span>
          </div>
          <!--          <div class="record-row">-->
          <!--            <span class="label">账户余额</span>-->
          <!--            <span class="value">¥{{ formatPrice(record.balance) }}</span>-->
          <!--          </div>-->
          <!--          <div class="record-row">-->
          <!--            <span class="label">交易说明</span>-->
          <!--            <span class="value">{{ record.description }}</span>-->
          <!--          </div>-->
          <div class="record-row" v-if="type == 'withdraworde' || type == 'rechargeorde'">
            <span class="label">{{ $t('状态') }}</span>
            <span class="value">
              <el-tag :type="getStatusType(record.payStatus)">
                <span v-if="type == 'rechargeorde'">
                  <span v-if="record.payStatus == 'WAIT'">{{ $t('待审核') }}</span>
                  <span v-if="record.payStatus == 'SUCCESS'">{{ $t('成功') }}</span>
                  <span v-if="record.payStatus == 'FAIL'">{{ $t('失败') }}</span>
                  <span v-if="record.payStatus == 'CANCEL'">{{ $t('已取消') }}</span>
                </span>
                <span v-else>
                  <span v-if="record.applyStatus == 'WAIT'">{{ $t('待审核') }}</span>
                  <span v-if="record.applyStatus == 'SUCCESS'">{{ $t('成功') }}</span>
                  <span v-if="record.applyStatus == 'FAIL'">{{ $t('失败') }}</span>
                  <span v-if="record.applyStatus == 'CANCEL'">{{ $t('已取消') }}</span>
                </span>
              </el-tag>
            </span>
          </div>
        </div>
      </div>

      <div class="pagination">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
          :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next" background class="amazon-pagination"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import dayjs from 'dayjs'
import { ApiRechargeList, ApiWithdrawList, walletrecordlist } from "@/api/assets";
import { ElLoading } from "element-plus";
import useLangStore from '@/store/modules/lang'
const langStore = useLangStore()

// 状态
const type = ref('rechargeorde')
const date = ref()
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const dataList = ref([])

//更改交易类型
const handleTypeChange = (val) => {
  dataList.value = []
  currentPage.value = 1;
  total.value = 0;
  if (type.value == 'recharge') {
    getstatus.value = [1]
  } else if (type.value == 'withdraw') {
    getstatus.value = [2]
  } else if (type.value == 'consume') {
    getstatus.value = [18, 19]
  } else if (type.value == 'refund') {
    getstatus.value = [20]
  } else if (type.value == 'refund') {
    getstatus.value = [20]
  } else if (type.value == 'commission') {
    getstatus.value = [21]
  } else {
    getstatus.value = ''
  }
  if (type.value === 'rechargeorde') {
    getRechargeList()
  } else if (type.value === 'withdraworde') {
    getWithdrawList()
  } else {
    getwalletrecordlist();
  }
}
//账变记录
const getstatus = ref('');
const getwalletrecordlist = () => {
  walletrecordlist({
    // pageSize和pageNum
    status: getstatus.value,
    pageNum: currentPage.value,
    pageSize: pageSize.value
  }).then(res => {
    dataList.value = res.rows
    total.value = res.total
  }).finally(() => {
    loading.close()
  })
}
const getRechargeList = () => {
  const loading = ElLoading.service()
  ApiRechargeList({
    page: currentPage.value,
    pageSize: pageSize.value
  }).then(res => {
    dataList.value = res.rows
    total.value = res.total
  }).finally(() => {
    loading.close()
  })
}
const getWithdrawList = () => {
  const loading = ElLoading.service()
  ApiWithdrawList({
    page: currentPage.value,
    pageSize: pageSize.value
  }).then(res => {
    dataList.value = res.rows
    total.value = res.total
  }).finally(() => {
    loading.close()
  })
}

const handleSizeChange = (val) => {
  pageSize.value = val
  if (type.value === 'rechargeorde') {
    getRechargeList()
  } else if (type.value === 'withdraworde') {
    getWithdrawList()
  } else {
    getwalletrecordlist();
  }

}

const handleCurrentChange = (val) => {
  currentPage.value = val
  if (type.value === 'rechargeorde') {
    getRechargeList()
  } else if (type.value === 'withdraworde') {
    getWithdrawList()
  } else {
    getwalletrecordlist();
  }
}

const formatPrice = (price) => {
  return price.toFixed(2)
}

const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}

const getStatusType = (status) => {
  const types = {
    'SUCCESS': 'success',
    'CANCEL': 'warning',
    'FAIL': 'danger',
    'WAIT': 'warning'
  }
  return types[status] || 'info'
}
const getTransactionTypeLabel = (type) => {
  const types = {
    recharge: '充值',
    withdraw: '提款',
    consume: '消费',
    refund: '退款',
    commission: '返佣'
  }
  return types[type]
}

const isMobile = ref(window.innerWidth <= 768)

// 监听窗口大小变化
window.addEventListener('resize', () => {
  isMobile.value = window.innerWidth <= 768
})

onMounted(() => {
  getRechargeList()
})
</script>

<style lang="scss" scoped>
@use '@/styles/variables' as *;

.transactions-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  @media #{$media-mobile} {
    border-radius: 0;
    padding: 16px;
    box-shadow: none;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    @media #{$media-mobile} {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      margin-bottom: 16px;
    }

    h2 {
      font-size: 21px;
      color: #111;
      font-weight: 400;
      margin: 0;
    }

    .filters {
      display: flex;
      gap: 16px;
      width: 100%;
      max-width: 500px;

      @media #{$media-mobile} {
        flex-direction: column;
        gap: 8px;
        max-width: none;
      }
    }
  }
}

.type-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;

  &.recharge {
    background: #e6f4ff;
    color: #0066c0;
  }

  &.withdraw {
    background: #f0f5ff;
    color: #1890ff;
  }

  &.consume {
    background: #fff3e6;
    color: #c45500;
  }

  &.refund {
    background: #f6ffed;
    color: #067d62;
  }

  &.commission {
    background: #f9f0ff;
    color: #722ed1;
  }
}

.amount {
  font-weight: 500;

  &.recharge,
  &.refund {
    color: #067d62;
  }

  &.withdraw {
    color: #c45500;
  }

  &.consume {
    color: #c45500;
  }

  &.commission {
    color: #722ed1;
  }
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-empty) {
  padding: 60px 0;

  .empty-icon {
    font-size: 80px;
    color: #ccc;
    margin-bottom: 20px;
  }

  .empty-text {
    margin-top: 20px;
    color: #666;
    font-size: 14px;
  }
}

.mobile-list {
  .record-item {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }

    .record-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;

      &:not(:last-child) {
        border-bottom: 1px solid #f0f0f0;
      }

      .label {
        color: #666;
        font-size: 14px;
      }

      .value {
        color: #333;
        font-size: 14px;
        text-align: right;
      }
    }
  }
}
</style>
